import React from 'react'
import { useSelector } from 'react-redux'
import { Tag } from 'antd-mobile'
import { getUserRole } from '../utils/permission'
import type { RootState } from '../store/types'

/**
 * 用户角色显示组件
 * 在用户登录后显示当前角色信息
 */
const UserRoleDisplay: React.FC = () => {
  const userEmail = useSelector((state: RootState) => state.info.email)
  
  if (!userEmail) {
    return null
  }
  
  const role = getUserRole(userEmail)
  
  if (role === 'unknown') {
    return null
  }
  
  const roleConfig = {
    admin: {
      text: '管理员',
      color: 'danger'
    },
    normal: {
      text: '普通用户',
      color: 'default'
    }
  }
  
  const config = roleConfig[role]
  
  return (
    <Tag color={config.color} style={{ fontSize: '12px', marginLeft: '8px' }}>
      {config.text}
    </Tag>
  )
}

export default UserRoleDisplay
